import { Button, Form, Input, message } from 'antd'
import router from "@/router"
import { post } from "@/api/index"
import "./index.less"
export default function Login(){
  const [form] = Form.useForm()
  // 登录事件
  const handleSubmit = (form:any)=>{
    form.validateFields()
      .then(async (data:any)=>{
        // 校验通过调登录接口
        const res = await post("/users/login",{...data,fromManage:true})
        if(res.code === 200){
          // 登陆成功
          sessionStorage.setItem("userInfo",JSON.stringify(res.data))
          router.navigate("/home")
        }
        
      })
      .catch((e:any)=>{
        if(e.errorFields && e.errorFields.length){
          return message.error("请输入完整信息")
        }
      })
  }
  return (
    <div className='login-contain'>
      <div className='inner'>
        <h2>Zhou-Blog管理端</h2>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal"
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item
            label="账户"
            name="userName"
            rules={[{ required: true, message: '请输入用户名' }]}

            validateTrigger={['onChange','onBlur']}
          >
            <Input allowClear={true}/>
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
            validateTrigger={['onChange','onBlur']}
          >
            <Input.Password allowClear={true} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" onClick={()=>{ handleSubmit(form) }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}